<template>
    <div class="tipBg" v-if="visibleBg" @click="close(0)">
        <transition name="tipsAnimate">
            <div class="tips" :class='icon' v-show="visible">
                {{content}}
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    data(){
        return{
            visibleBg:false,
            visible:false,
            content:'暂无内容',
            time:2000,
            icon:''
        }
    },
    mounted(){
        this.close(2000)
    },
    methods:{
        close(time) {
            this.time = time;
            window.setTimeout(() =>{
                this.visible = false
                window.setTimeout(()=>{
                    this.visibleBg = false
                }, 300)
            }, this.time);
        },
    }
}
</script>

<style lang='scss' scoped>
.tipBg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    background: rgba($color: #000000, $alpha: .5);
    .tips{
        width: 4rem;
        min-height: 2rem;
        border-radius: .4rem;
        background: #FFF;
        z-index: 600;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -1rem;
        margin-left: -2rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: .32rem;
        color: #BDBEBF;
        padding: .3rem .5rem;
        &.correct{
            background: url(../../assets/img/dot-correct.png) #FFF no-repeat .55rem center;
            background-size: auto .4rem;
            padding-left: 1rem;
        }
    }
}
.tipsAnimate-enter-active{
    animation-name:fadeInRight;animation-duration:.3s;
}
.tipsAnimate-leave-active{
    animation-name:fadeOutLeft;animation-duration:.3s;
}
</style>